Skip to content

Add web frontend for vault-strategy Solana program - #116

Merged
mikemaccana merged 8 commits into
mainfrom
claude/ci-errors-idl-review-qaa5ne
Jul 30, 2026
Merged

Add web frontend for vault-strategy Solana program#116
mikemaccana merged 8 commits into
mainfrom
claude/ci-errors-idl-review-qaa5ne

Conversation

@mikemaccana

@mikemaccana mikemaccana commented Jul 30, 2026

Copy link
Copy Markdown
Collaborator

Summary

This PR adds a complete web frontend for the vault-strategy Solana program—an educational demo of a manager-run investment vault. The app is built with Vite + React + TypeScript + Tailwind and provides both investor and manager interfaces for interacting with the on-chain vault.

Key Changes

  • IDL and Type Definitions: Added the complete Anchor IDL (vault_strategy.json) and generated TypeScript types for program accounts and instructions
  • Core Hooks: Implemented useVault hook that manages strategy state, position tracking, and exposes both depositor actions (deposit/redeem) and manager actions (rebalance, set weights, add assets, collect fees)
  • Instruction Building: Created instructions.ts with builders for all program interactions (deposit, withdraw, rebalance, add asset, approve asset, initialize strategy, etc.)
  • Strategy State Management: Implemented strategy.ts for loading and computing strategy views, including NAV calculations, asset pricing via Pyth oracles, and position tracking
  • Investor UI: Built InvestorView with deposit/redeem ticket, allocation visualization, and portfolio metrics
  • Manager UI: Built ManagerView with panels for rebalancing, weight adjustments, asset management, and fee collection
  • Utility Libraries: Added helpers for amount parsing, formatting (USDC, shares, basis points), transaction error handling, and Pyth price feed parsing
  • Configuration: Set up environment-based config for RPC endpoints and program IDs, with sensible devnet defaults
  • Styling: Implemented dark-mode Tailwind theme with semantic colors (accent amber, gain/loss green/red) and a curated asset palette
  • Verification Script: Added offline verification script (verify-client.mjs) that validates discriminators, PDAs, and instruction encoding against the IDL

Notable Implementation Details

  • Live Account Reads: Every number on screen is a real on-chain account read; no cached state beyond the current render cycle
  • NAV Calculation: Computes net asset value by reading Pyth price feeds directly from account bytes (matching the program's oracle parsing) and detecting stale prices
  • Tolerance-Based Slippage: Deposit and redeem operations apply configurable tolerance floors to protect users from sandwich attacks
  • PDA Derivation: All PDAs (strategy, share mint, asset vaults, etc.) are derived client-side and verified against on-chain accounts
  • Swap Router Integration: Deposit instruction chains through the swap router program to convert USDC into target assets
  • Manager-Only Actions: Rebalance, weight adjustment, and asset addition are gated to the strategy manager via account relations

https://claude.ai/code/session_01GCy1icrZWHGqyWRCYqYJmf

mikechabanqn and others added 8 commits July 27, 2026 22:49
@mikechabanqn
docs: add PRODUCT.md for vault-strategy frontend
c12a938
@mikechabanqn
Layer 1: vault-strategy client + IDL + scaffold
72a9668
@mikechabanqn
Layer 2: investor view, verified
6a10cb2
@mikechabanqn
Layer 3: manager view, verified
c6edfaa
@mikechabanqn
Layer 4: polish pass — motion, focus states, honest bundle revert
ab706fa
@claude
fix: Biome formatting and lint errors in vault-strategy app
3add316 
- Run biome check --write across the new app (quote style, semicolons, import order)
- Add type="button" to non-submit buttons (a11y/useButtonType)
- Suppress useExhaustiveDependencies for the intentional refresh tick dependency
- Suppress noUnknownAtRules for Tailwind v3 directives in index.css

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GCy1icrZWHGqyWRCYqYJmf
@claude
fix: verify script ESM interop, stop committing tsc/vite build artifacts
812e2dc 
- verify-client.mjs: @coral-xyz/anchor is CJS; BN only exists on the default
  export under Node ESM interop, so the script failed with 'BN is not a
  constructor' on a clean install. Resolve exports from both namespaces.
- Remove committed build artifacts (vite.config.js, vite.config.d.ts,
  *.tsbuildinfo) and gitignore them. The compiled vite.config.js is a real
  footgun: Vite resolves .js config before .ts, so a stale compiled copy
  silently shadows vite.config.ts.
- Point composite-project emit and tsbuildinfo at node_modules/.tmp so
  tsc -b never writes artifacts into the source tree again.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GCy1icrZWHGqyWRCYqYJmf
@claude
refactor: replace hand-written IDL with anchor idl build output
85c87b1 
Generate app/src/idl/vault_strategy.json from the program source with
anchor idl build (anchor-cli 1.1.2, the version CI installs) instead of
hand-transcribing it. The generated IDL carries the same discriminators,
account orders, flags, and args as the hand-written one (verified by diff),
and adds PDA seed derivations, has_one relations, known program addresses,
and doc strings from the Rust source.

Also update the README and comments that explained why the IDL was
hand-authored, and document the regeneration command.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GCy1icrZWHGqyWRCYqYJmf
@mikemaccana

mikemaccana commented Jul 30, 2026

Copy link
Copy Markdown
Collaborator Author

Supersedes #115 — same frontend, with the CI failures fixed and the IDL regenerated.

  • Biome CI is green (was 54 errors). Reformatted to the repo's config (double quotes, semicolons, sorted imports), added type="button" to three non-submit buttons, and suppressed two rules with explanations: the intentional tick refresh dependency in useVault.ts, and the Tailwind v3 directives in index.css.
  • Fixed scripts/verify-client.mjs, which failed on a clean install. @coral-xyz/anchor is CJS, and under Node ESM interop BN only exists on the default export — so the PR's own verification gate died with BN is not a constructor on 5 of 13 checks. It passes everywhere now.
  • Replaced the hand-written IDL with anchor idl build output. Generated with anchor-cli 1.1.2 (the version CI installs). I diffed the two first: discriminators, account orders, writable/signer flags, and args were all identical, so this is a safe swap that additionally gains PDA seed derivations, has_one relations, known program addresses, and doc strings from the Rust source.
  • Stopped committing build artifacts (vite.config.js, vite.config.d.ts, *.tsbuildinfo) and gitignored them. The compiled vite.config.js was the risky one: Vite resolves .js config ahead of .ts, so a stale copy would have silently shadowed edits to vite.config.ts. tsc -b now emits to node_modules/.tmp.
  • Docs updated to match: the "Why the IDL is hand-authored" section is now "Where the IDL comes from", with the regeneration command.

pnpm verify, pnpm typecheck, pnpm build, and repo-wide biome check all pass.

Generated by Claude Code

@mikemaccana mikemaccana mentioned this pull request Jul 30, 2026
Closed
@mikemaccana
mikemaccana merged commit 1bd0297 into main Jul 30, 2026
27 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@mikemaccana @mikechabanqn @claude